<script setup lang="ts">
import { useFormat } from '@/composable'
import { getMedicinerDetail, getOrderId } from '@/services/medicine'
import { getReceive } from '@/services/order'
import type { orderInfo } from '@/types/order'
import { onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'
import type { MedicinesRes, Medicine } from '@/types/medicine'
import { showToast } from 'vant'
import MedicineList from './components/MedicineList.vue'
import PriceGroup from './components/PriceGroup.vue'
import { useConsultStore } from '@/stores'

const { formatTel } = useFormat()
const checked = ref(false)
// 获取收货地址
const deliveryArr = ref<orderInfo[]>([])
// 默认的收货地址
const defaultDelivery = ref<orderInfo>()
const getLocation = async () => {
  const { data } = await getReceive()
  deliveryArr.value.push(...data)
  defaultDelivery.value = deliveryArr.value.filter((item) => item.isDefault)[0]
}
// 获取药品详情
const route = useRoute()
const medicineDetail = ref<MedicinesRes>()
const medicineArr = ref<Medicine[]>([])
const getMedicines = async () => {
  const { data } = await getMedicinerDetail({
    prescriptionId: route.query.id as string
  })
  medicineDetail.value = data
  medicineArr.value.push(...data.medicines)
}
// 获取订单ID
const orderID = ref<string>('')
// 立即支付
const onSubmit = async () => {
  // 判断是否有地址和处方id
  if (!defaultDelivery.value?.id) return showToast('请选择收货地址')
  else if (!medicineDetail.value?.id) return showToast('没有找到处方id')
  // 判断是否勾选已同意
  else if (!checked.value) return showToast('请勾选同意协议')
  else {
    showBottom.value = true
    const data = await getOrderId({
      id: medicineDetail.value.id,
      couponId: medicineDetail.value.couponId,
      addressId: defaultDelivery.value.id
    })
    orderID.value = data.data.id
    console.log(orderID.value, 'order.value')
  }
}
// 更多地址
onMounted(() => {
  getLocation()
  getMedicines()
})
// 支付
const showBottom = ref(false)
// 从pinia中获取问诊室上路由的参数
const consult = useConsultStore()
const roomConfig = consult.routeConfig
</script>

<template>
  <div class="pay-page" v-if="medicineDetail && defaultDelivery">
    <DP-NavBar
      title="药品支付"
      bgc="#16c2a3"
      color="#fff"
      :back="
        () => {
          $router.push({ name: 'ConsultRoom', query: roomConfig })
        }
      "
    ></DP-NavBar>
    <div class="order-address">
      <div class="location">
        <van-icon name="location" color="#ff7702" />
        <span>{{ defaultDelivery?.city }}{{ defaultDelivery?.county }}</span>
      </div>
      <div class="userInfo">
        <div class="left">
          <div class="local">{{ defaultDelivery?.addressDetail }}</div>
          <div class="info">
            <span class="name">{{ defaultDelivery?.receiver }}</span>
            <span class="tel">{{ formatTel(defaultDelivery?.mobile) }}</span>
          </div>
        </div>
        <div class="more">
          <van-icon
            name="arrow"
            @click="
              $router.push({
                name: 'UserAddress'
              })
            "
          />
        </div>
      </div>
    </div>
    <div class="order-drug">
      <medicine-list :medicineArr="medicineArr"></medicine-list>
    </div>
    <div class="order-price">
      <price-group :medicine-detail="medicineDetail"></price-group>
    </div>
    <div class="order-warn">
      <p class="warn">
        由于药品的特殊性，如非错发、漏发药品的情况，药品一经发出
        不得退换，请核对药品信息无误后下单。
      </p>
      <div class="agree">
        <van-checkbox v-model="checked"
          >我已同意<a href="javascript:;" class="deal"
            >支付协议</a
          ></van-checkbox
        >
      </div>
    </div>
    <van-submit-bar
      class="order-submit"
      :price="medicineDetail!.payment  * 100"
      button-type="primary"
      button-text="立即支付"
      @submit="onSubmit"
    />
    <DP-Pay
      v-if="showBottom"
      :show-bottom="showBottom"
      :orderID="orderID"
      :actual-payment="medicineDetail.actualPayment"
      :close-sheet="
        () => {
          showBottom = false
        }
      "
      pay-callback="/order/pay/result"
    ></DP-Pay>
  </div>
  <div class="pay-page" v-else>
    <DP-NavBar title="药品支付" bgc="#16c2a3" color="#fff"></DP-NavBar>
    <van-skeleton title :row="4" style="margin-top: 30px" />
    <van-skeleton title :row="4" style="margin-top: 30px" />
  </div>
</template>

<style lang="scss" scoped>
$price_red: #eb5757;
:deep(.van-nav-bar) {
  .van-nav-bar__arrow,
  .van-nav-bar__title {
    color: #fff;
  }
}
.pay-page {
  padding-top: 46px;
  padding-bottom: 65px;
  .order-address {
    padding: 15px 15px 0;
    .userInfo {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .left {
        .local {
          font-size: 17px;
          margin-bottom: 5px;
        }
        .info {
          font-size: 13px;
          .name {
            margin-right: 5px;
          }
        }
      }
    }
    .location {
      color: var(--cp-tag);
      font-size: 13px;
      margin-bottom: 5px;
    }
    &::after {
      display: block;
      content: '';
      height: 15px;
      background-color: var(--cp-bg);
      margin: 15px -15px 0;
    }
  }
  .order-drug {
    padding: 0 15px;
  }
  .order-warn {
    margin-top: 10px;
    padding: 0 15px;
    .warn {
      font-size: 12px;
      color: var(--cp-tag);
      margin-bottom: 30px;
      &::before {
        content: '*';
        color: $price_red;
        font-size: 14px;
      }
    }
    .agree {
      display: flex;
      justify-content: center;
      font-size: 14px;
      .deal {
        color: var(--cp-primary);
      }
    }
  }
  .van-submit-bar {
    &::before {
      display: block;
      content: '';
      width: 100%;
      height: 1px;
      background-color: var(--van-cell-border-color);
    }
    :deep(.van-submit-bar__text) {
      text-align: left;
    }
    :deep(.van-button) {
      width: 200px;
    }
  }
}
</style>
